<script setup lang="ts">
import ChannelNav from "@/components/ChannelNav.vue";
import ArticleList from "@/components/ArticleList.vue";
import { useChannel } from "@/hooks/channel";

const { activeId, channelList } = useChannel();
</script>

<template>
  <!-- 频道 -->
  <ChannelNav
    :active-id="activeId"
    :channels="channelList"
    @update-active-id="activeId = $event"
  ></ChannelNav>
  <!-- 列表 -->
  <ArticleList :active-id="activeId"></ArticleList>
  <!-- 二级路由容器 -->
  <div class="fix">
    <!-- 详情进入的页面 -->
    <router-view></router-view>
  </div>
</template>

<style scoped>
.fix {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
}
</style>
